* {
    margin : 0;
    padding: 0;
}

.main {
    max-width : 900px;
    margin    : 0 auto;
    margin-top: 50px;
}

.JDT1 {
    width        : 100%;
    height       : 10px;
    border       : #000 solid 1px;
    border-radius: 10px;
}

.JDT2 {
    width                     : 100%;
    height                    : 100%;
    background-color          : aqua;
    border                    : #000 solid 1px;
    border-radius             : 10px;
    transition                : 1000ms;
    transition-timing-function: linear;
}

.span-input {
    width  : 350px;
    display: inline-block;
}

@media screen and (max-width: 700px) {
    .main {
        margin-top: 0;
        padding   : 0 !important;
        min-height: 100vh;
    }
    .time {
        font-size: 48px;
    }
    .JDT1 {
        height: 24px;
        border-radius: 25px;
    }
    .chapter {
        font-size: 26px;
    }
    .question {
        font-size: 36px;
    }
    .span-input {
        font-size: 36px;
    }
    .btn {
        font-size: 36px;
    }
}